<template>
	<el-button class="mb20" @click="add" type="primary">新增</el-button>
	 
	<el-table class="mb20" :data="tableData" border style="width: 100%">
		<el-table-column prop="name" label="分类" />
		<el-table-column prop="pname" label="所属分类" />
		<!-- <el-table-column
	          prop="image"
	          label="分类图片"
	          width="100"
	          
	        >
	          <template #default="scope">
				  
	              <el-image
	                  style="width: 100px; height: 100px"
	                  :src="ifImgHeader(scope.row.image)"
	                  :preview-src-list="[ifImgHeader(scope.row.image)]"
	                >
	                </el-image>
	          </template>
	        </el-table-column> -->
		<el-table-column label="操作">
			<template #default="scope">
				<el-button size="mini"
					@click="edit({row:scope.row,index:scope.$index}, ()=>{scope.row.pid = scope.row.pid == 0 ? scope.row.pid + '' : + scope.row.pid})">
					编辑</el-button>
				<el-button size="mini" type="danger" @click="removeModal({row:scope.row,index:scope.$index})">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<!-- <el-pagination background layout="prev, pager, next" :total="1000">
	</el-pagination> -->
	<el-dialog v-model="modalState" title="分类">
		<el-form :model="form" ref="rule" :rules="rules">
			<el-form-item label="分类名称"  prop="name" :label-width="formLabelWidth">
				<el-input v-model="form.name" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="所属分类"  prop="id" :label-width="formLabelWidth">
				<el-select v-model="form.id" placeholder="请选择所属分类">
					<el-option label="顶级分类" value="0"></el-option>
					<el-option v-for="(item,index) in pid" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>

		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="modalState = false">取消</el-button>
				<el-button type="primary" @click="submit('rule')">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts">
	import {
		ElMessageBox,
		ElMessage
	} from 'element-plus'
	export default {
		data() {
			return {
				formLabelWidth: '120px',
				form: {
					name: '',
					id: '',
				},
				rules: {
				        name: [
				          {
				            required: true,
				            message: '请填写分类名称',
				            trigger: 'blur',
				          }
				        ],
						pid: [
						  {
						    required: true,
						    message: '请选择所属分类',
						    trigger: 'change',
						  }
						],
				},
				pid: []
			}
		},
		mounted() {
			this.getData();
		},
		methods: {

			getData() {
				this.$http.post("/index.php/index/Goods/fllist").then(data => {
					this.pid = [];
					
					data.forEach(t => {
						if (t.pid == 0) {
							console.log(t)
							this.pid.push({
								name: t.name,
								id: t.id
							});
							t.pname = "顶级分类";
						} else {
							if(data.find(ts => ts.id == t.pid)){
								t.pname = data.find(ts => ts.id == t.pid).name;
							}
							//console.log(data.find(ts=>ts.id==t.pid))
							
						}
						t.pid = t.pid
					})
					if(this.selectData===null){
						this.tableData = data;
					}else if(this.selectData===0){
						this.tableData = data.filter(t=>t.pid===0)
					}else{
						this.tableData = data.filter(t=>t.pid!==0)
					}
					

				})
			},
			submit(ref) {
				console.log(this.$refs)
				this.doRules(this.$refs[ref]).then(()=>{
					if (this.id) this.form.id = this.id;
					this.form.image = "";
					this.$http.post(this.id ? '/index.php/index/Goods/fledit' : "/index.php/index/Goods/fladd",
						this.form).then(data => {
						console.log(data)
						this.modalState = false;
						ElMessage({
							message: this.id ? '编辑成功' : '新增成功',
							type: 'success',
						})
						this.getData();
					})
				})
				
			},
			remove(data){
				this.$http.post("/index.php/index/Goods/fldel",{id:data.row.id}).then(data => {
					ElMessage({
						message: '删除成功' ,
						type: 'success',
					})
					this.getData();
				})
			},
			handleAvatarSuccess(file) {

				this.form.image = file.data;
			},
			


		}
	}
</script>
